<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />
		<meta name=renderer content=webkit>

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!--插件基本框架-->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css" />

		<!--页面布局样式-->
		<link rel="stylesheet" type="text/css" href="css/swiperStyle.css" />

		<!-- ie 兼容性样式 -->
		<link rel="stylesheet" type="text/css" href="../css/jianrong.css" />

		<!-- 本页面css -->
		<link rel="stylesheet" type="text/css" href="css/detail.css" />

		<link rel="stylesheet" type="text/css" href="css/renewManage.css" />

		<style type="text/css">
			.form-wrapper .renewModule-wrapper .renewModule-title {
				display: inline-block;
				width: 100px;
			}

			.renewModule-ButtonWrapper {
				align-items: center;
			}

			.form-wrapper .renewModule-wrapper .yzButton:first-child {
				margin-left: 0px;
			}

			.form-wrapper .renewModule-ButtonWrapper .el-range-editor.el-input__inner {
				border-color: #6462F3;
			}

			.form-wrapper .from-title-wrapper {
				padding-top: 20px;
			}

			.form-wrapper .from-title-wrapper .yzButton.noClick {
				background: #FFFFFF;
				border: 1px solid #EEEEEE;
				color: #999999;
				cursor: default;
			}

			.autoMethod .th-wrapper .th-item,
			.autoMethod .tr-wrapper .tr-item {
				width: 16%;
			}

			.autoMethod .tr-wrapper .tr-item.config,
			.autoMethod .th-wrapper .th-item.config {
				width: 35%;
			}

			.dialog-content .dialog-content-tip {
				background: #F3F3FF;
				border: 1px solid #AEABFF;
				border-radius: 4px;
				color: #5958F1;
				padding: 7px 16px;
				line-height: 24px;
			}

			.dialog-content .dialog-content-info {
				margin-bottom: 8px;
			}

			.yz-el-dialog .dialog-button-wrapper .yzButton.confirm {
				padding: 0 20px;
				white-space: nowrap;
				width: auto;
			}
			
			p.productName {
				line-height: inherit;
			}
			
		</style>

	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div style="position: relative;" class="orderDetail-wrapper table-wrapper section" v-cloak>

			<div class="orderList-content-wrapper table-content-wrapper noPay">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">续费管理</span>
				</div>
				<div class="form-wrapper header">
					<div class="from-title-wrapper">
						<span class="from-title">
							续费管理</span>
					</div>

					<div class="renewModule-wrapper fboxRow">
						<span class="renewModule-title">产品：</span>
						<div @click="handleClickSelectProductType(item)" :class="{'deep':item.value === renewActiveType}" v-for="(item,index) in renewTypeGroup"
						 class="yzButton mr-10">{{item.label}} <span class="num" v-if="item.value !== 'all'">({{item.num === undefined ? 0 : item.num}})</span></div>
					</div>
					<div class="renewModule-wrapper fboxRow mt-20">
						<span class="renewModule-title">时间范围：</span>
						<div class="fboxRow renewModule-ButtonWrapper">
							<div @click="handleClickSelectProductTimeType(item)" v-if="showCustomTimeButton(item)" :class="{'deep':item.value === renewActiveTimeType}"
							 v-for="(item,index) in renewActiveTimeGroup" class="yzButton mr-10">{{item.label}} <span class="num" v-if="item.value !== 'all' && item.value !== 'customTime'">({{item.num === undefined ? 0 : item.num}})</span></div>
							<el-date-picker v-if="showdatepicker" class="mr-20" prefix-icon="el-icon-date" value-format="timestamp" @change="changeCustomselectTime"
							 v-model="customTimeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</div>

					</div>
				</div>
				<div class="form-wrapper">
					<div class="yz-tab-wrapper">
						<div :class="{'active': renewMethodType === 0}" @click="handleClickTabChangeRenewMethodType(0)" class="yz-tab-item">手动续费（{{manuallyRenewNum === undefined ? 0 : manuallyRenewNum}}）</div>
						<div :class="{'active': renewMethodType === 1}" @click="handleClickTabChangeRenewMethodType(1)" class="yz-tab-item">自动续费（{{autoRenewNum === undefined ? 0 : autoRenewNum}}）</div>
					</div>

					<div class="from-title-wrapper">
						<div class="yzButton-wrapper fboxRow">
							<div :class="{'noClick': handleBatchrenewIsClick() }" class="yzButton  lightToDeep" @click="handleClickBatchrenewButton">批量续费</div>
							<div v-if="renewMethodType === 0" @click="handleClickBatchSettingAutoRenew" :class="{'noClick': handleBatchrenewIsClick() }" class="yzButton  lightToDeep ml-10">设置自动续费</div>
							<div v-if="renewMethodType === 1" :class="{'noClick': handleBatchrenewIsClick() }" class="yzButton  lightToDeep ml-10"
							 @click="handleClickBatchReplyHandleRenew">恢复手动续费</div>
						</div>

						<el-input maxlength="50" @keyup.enter.native="searchSafegroupBykeyword" class="button-wrapper-right" style="width: 220px"
						 placeholder="请输入实例ID/实例名称" v-model="searchkeywords">
							<i @click="searchSafegroupBykeyword" slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>

					<div v-if="renewMethodType === 0">
						<el-table @selection-change="handleSelectionChange" ref="refHandleRenewTable" :data="handleRenewtableData" style="position: relative;">
							<el-table-column type="selection" width="55">
							</el-table-column>
					
							<el-table-column type="expand" class="">
								<template slot-scope="props">
									<i class="table-flag"></i>
									<div class="yzTable-wrapper">
										<div class="th-wrapper  fboxRow">
											<div class="th-item">产品类型</div>
											<div class="th-item">名称/ID</div>
											<div class="th-item config">产品配置</div>
											<div class="th-item">到期时间</div>
										</div>
										<div class="tr-wrapper fboxRow">
											<!--产品类型  -->
											<div class="tr-item">{{props.row.typeLabel}}</div>
											<!-- 名称/ID  -->
											<div class="tr-item">
												<p>{{props.row.name}}</p>
												<p style="margin-top: 10px;display: inline-block;">ID:{{props.row.id}}</p>
											</div>
											<!-- 产品配置 -->
											<div class="tr-item config">
												<el-row>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">产品名称：</span>
															<span class="config-val">{{props.row.name}}</span>
														</div>
					
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">ID：</span>
															<span class="config-val">{{props.row.id}}</span>
														</div>
													</el-col>
					
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">地域：</span>
															<span class="config-val">{{props.row.area}}</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">IP：</span>
															<span class="config-val">{{props.row.ipNum}}个</span>
														</div>
													</el-col>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">CPU：</span>
															<span class="config-val">{{props.row.cpNum}}核</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">数据盘：</span>
															<span class="config-val">{{props.row.dataDisk}}G</span>
														</div>
													</el-col>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">内存：</span>
															<span class="config-val">{{props.row.memory}}G</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">带宽：</span>
															<span class="config-val">{{props.row.bindWith}}M</span>
														</div>
													</el-col>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">SSD：</span>
															<span class="config-val">{{props.row.ssd}}</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">操作系统：</span>
															<span class="config-val">{{props.row.systemMirror}}</span>
														</div>
													</el-col>
												</el-row>
											</div>
											<!-- 到期时间 -->
											<div class="tr-item">
												<span> {{props.row.expireTime}}</span>
											</div>
					
										</div>
									</div>
								</template>
							</el-table-column>
					
					
					
							<el-table-column label="产品类型" prop="typeLabel">
							</el-table-column>
							<el-table-column label="名称/ID" prop="name">
								<template slot-scope="scope">
									<p>{{scope.row.name}}</p>
									<p style="margin-top: 10px;display: inline-block;">ID:{{scope.row.id}}</p>
								</template>
							</el-table-column>
							<el-table-column label="地域" prop="area">
								<template slot-scope="scope">
									{{scope.row.area}}
								</template>
					
							</el-table-column>
					
							<el-table-column label="产品配置" width="300">
								<template slot-scope="scope">
									<p class="extand configInfo">
										cpu：{{scope.row.cpNum}}核 内存：{{scope.row.memory}}G SSD：{{scope.row.SSD}}G IP数：{{scope.row.ipNum}}个
									</p>
									<span class="extand detailButton" @click="expandtableRow(scope.row)">详情</span>
								</template>
							</el-table-column>
					
							<el-table-column label="到期时间" prop="expireTime">
								<template slot-scope="scope">
									{{scope.row.expireTime}}
								</template>
							</el-table-column>
					
							<el-table-column label="操作" width="200px">
								<template slot-scope="scope">
									<span @click="renewProduct(scope.row)" style="color: #6462F3;cursor: pointer;">续费</span>
									<span @click="handleClicksettingAutoRenew(scope.row)" style="color: #6462F3;cursor: pointer;margin-left: 30px;white-space: nowrap;">设置自动续费</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-wrapper">
							<div class="total-wrapper">
								<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
								<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
									<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
							 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :pager-count="4" :total="pageInfo.totalSize">
							</el-pagination>
						</div>
					</div>
					
					
					<div v-if="renewMethodType === 1">
						<el-table @selection-change="handleSelectionChange" ref="refAutoRenewTable" :data="autoRenewtableData" style="position: relative;">
							<el-table-column type="selection" width="55">
							</el-table-column>

							<el-table-column type="expand" class="">
								<template slot-scope="props">
									<i class="table-flag"></i>
									<div class="yzTable-wrapper autoMethod">
										<div class="th-wrapper  fboxRow">
											<div class="th-item">产品类型</div>
											<div class="th-item">名称/ID</div>
											<div class="th-item config">产品配置</div>
											<div class="th-item">到期时间</div>
											<div class="th-item">续费周期</div>
										</div>
										<div class="tr-wrapper fboxRow">
											<!--产品类型  -->
											<div class="tr-item">{{props.row.typeLabel}}</div>
											<!-- 名称/ID  -->
											<div class="tr-item">
												<p>{{props.row.name}}</p>
												<p style="margin-top: 10px;display: inline-block;">ID:{{props.row.id}}</p>
											</div>
											<!-- 产品配置 -->
											<div class="tr-item config">
												<el-row>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">产品名称：</span>
															<span class="config-val">{{props.row.name}}</span>
														</div>

													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">ID：</span>
															<span class="config-val">{{props.row.id}}</span>
														</div>
													</el-col>

													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">地域：</span>
															<span class="config-val">{{props.row.area}}</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">IP：</span>
															<span class="config-val">{{props.row.ipNum}}个</span>
														</div>
													</el-col>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">CPU：</span>
															<span class="config-val">{{props.row.cpNum}}核</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">数据盘：</span>
															<span class="config-val">{{props.row.dataDisk}}G</span>
														</div>
													</el-col>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">内存：</span>
															<span class="config-val">{{props.row.memory}}G</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">带宽：</span>
															<span class="config-val">{{props.row.bindWith}}M</span>
														</div>
													</el-col>
													<el-col :span="8">
														<div class="config-wrapper">
															<span class="config-title">SSD：</span>
															<span class="config-val">{{props.row.ssd}}</span>
														</div>
													</el-col>
													<el-col :span="16">
														<div class="config-wrapper">
															<span class="config-title">操作系统：</span>
															<span class="config-val">{{props.row.systemMirror}}</span>
														</div>
													</el-col>
												</el-row>
											</div>
											<!-- 到期时间 -->
											<div class="tr-item">
												<span> {{props.row.expireTime}}</span>
											</div>

											<div class="tr-item">
												<span> {{props.row.renewTimePeriod}}</span>
											</div>

										</div>
									</div>
								</template>
							</el-table-column>



							<el-table-column label="产品类型" prop="typeLabel">
							</el-table-column>
							<el-table-column label="名称/ID" prop="name">
								<template slot-scope="scope">
									<p>{{scope.row.name}}</p>
									<p style="margin-top: 10px;display: inline-block;">ID:{{scope.row.id}}</p>
								</template>
							</el-table-column>
							<el-table-column label="地域" prop="area">
								<template slot-scope="scope">
									{{scope.row.area}}
								</template>

							</el-table-column>

							<el-table-column label="产品配置" width="300">
								<template slot-scope="scope">
									<p class="extand configInfo">
										cpu：{{scope.row.cpNum}}核 内存：{{scope.row.memory}}G SSD：{{scope.row.SSD}}G IP数：{{scope.row.ipNum}}个
									</p>
									<span class="extand detailButton" @click="expandtableRow(scope.row)">详情</span>
								</template>
							</el-table-column>

							<el-table-column label="到期时间" prop="expireTime">
								<template slot-scope="scope">
									{{scope.row.expireTime}}
								</template>
							</el-table-column>


							<el-table-column label="续费周期" prop="renewTimePeriod">
								<template slot-scope="scope">
									{{scope.row.renewTimePeriod}}
								</template>
							</el-table-column>


							<el-table-column label="操作" width="200px">
								<template slot-scope="scope">
									<span @click="renewProduct(scope.row)" style="color: #6462F3;cursor: pointer;">续费</span>
									<span @click="handleClickreplyHandleRenew(scope.row)" style="color: #6462F3;cursor: pointer;margin-left: 30px;white-space: nowrap;">恢复手动续费</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="pagination-wrapper">
							<div class="total-wrapper">
								<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
								<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
									<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
							<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
							 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :pager-count="4" :total="pageInfo.totalSize">
							</el-pagination>
						</div>
					</div>

				</div>



				<el-dialog width="780px" class="yz-el-dialog" :visible.sync="dialogReplyHandleRenewVisible">
					<div slot="title" class="dialog-title">
						恢复手动续费
					</div>
					<div class="dialog-content">
						<div class="dialog-content-tip mb-20">
							自动续费将于服务到期前9天开始扣款，请保证信用卡登支付方式余额充足，如您的实例将于明天到期，请选择手工续费；
						</div>
						<div class="dialog-content-info">
							已选择 <span style="color: #5958F1;">{{reNewProductInfo.length}}个实例</span>，当前为自动续费，<span style="color: #5958F1;">确定要恢复手动续费吗?</span>
						</div>

						<el-table :data="reNewProductInfo" style="width: 100%;margin-bottom: 60px;">
							<!-- 占位 使用 -->
							<el-table-column width="20" label="">
							</el-table-column>
							<!-- 占位 使用end -->

							<el-table-column width="230" prop="productType" label="产品ID/名称">
								<template slot-scope="scope">
									<div class="fboxRow" style="white-space: nowrap;">
										<p class="productName">{{scope.row.id}}</p>

										<p class="productName">/{{scope.row.name}}</p>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="typeLabel" label="产品类型">
							</el-table-column>

							<el-table-column prop="expireTime" label="到期时间">
							</el-table-column>

							<el-table-column prop="renewTimePeriod" label="续费周期">
							</el-table-column>

						</el-table>

						<div class="dialog-button-wrapper fboxRow">
							<div @click="confirmReplyHandleRenew" class="yzButton  confirm">恢复手动续费</div>
							<div @click="dialogReplyHandleRenewVisible =  false" class="yzButton cancelButton">取消</div>
						</div>

					</div>

				</el-dialog>
				
				
				<el-dialog width="780px" class="yz-el-dialog" :visible.sync="dialogSettingAutoRenewVisible">
					<div slot="title" class="dialog-title">
						设置自动续费
					</div>
					<div class="dialog-content">
						<div class="dialog-content-tip mb-20">
							自动续费将于服务到期前9天开始扣款，请保证信用卡登支付方式余额充足，如您的实例将于明天到期，请选择手工续费；
						</div>
						<div class="dialog-content-info">
							已选择 <span style="color: #5958F1;">{{reNewProductInfo.length}}个实例</span> 到期后自动续费
						</div>
				
						<el-table :data="reNewProductInfo" style="width: 100%;margin-bottom: 20px;">
							<!-- 占位 使用 -->
							<el-table-column width="20" label="">
							</el-table-column>
							<!-- 占位 使用end -->
				
							<el-table-column width="auto" prop="productType" label="产品ID/名称">
								<template slot-scope="scope">
									<div class="fboxRow" style="white-space: nowrap;">
										<p class="productName">{{scope.row.id}}</p>
				
										<p class="productName">/{{scope.row.name}}</p>
									</div>
				
				
								</template>
							</el-table-column>
				
							<el-table-column prop="typeLabel" label="产品类型">
							</el-table-column>
				
							<el-table-column prop="expireTime" label="到期时间">
							</el-table-column>
				
						</el-table>
						
						<div class="replenish-wrapper">
							<div class="replenish-timeWrapper fboxRow" style="align-items: center;">
								<span class="replenish-time-title" style="width: 120px;">统一续费周期：</span>
								<el-select v-model="activesettingAutoTime">
									<el-option v-for="item in settingAutoTimeOptions" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</div>
						</div>
						
						
						<div class="dialog-button-wrapper fboxRow">
							<div @click="confirmSettingAutoRenew" class="yzButton  confirm">开通自动续费</div>
							<div @click="dialogSettingAutoRenewVisible =  false" class="yzButton cancelButton">取消</div>
						</div>
				
					</div>
				
				</el-dialog>

			</div>
		</div>

		<script type="application/javascript" src="../js/util.js"></script>

		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderDetail-wrapper',

				data: function() {
					return {
						// 新增
						activesettingAutoTime:undefined,
						settingAutoTimeOptions:[{
							value:'monthly',
							label:'1个月'
						},{
							value:'quarterly',
							label:'3个月'
						},{
							value:'semiannually',
							label:'半年'
						},{
							value:'annually',
							label:'1年'
						},{
							value:'biennially',
							label:'2年'
						},{
							value:'triennially',
							label:'3年'
						}],
						dialogSettingAutoRenewVisible:false, // 设置自动续费dialog是否显示
						dialogReplyHandleRenewVisible: false, // 恢复手动续费dialog是否显示
						handMethodmultipleSelection: [], // 手动续费 多选选中行  默认为空
						autoMethodmultipleSelection: [], // 自动续费 多选选中行  默认为空
						manuallyRenewNum: 5, // 手动续费 数量
						autoRenewNum: 6, // 自动续费 数量
						renewMethodType: 0, // 续费类型方式 0 手动续费   1 自动续费 
						renewActiveType: 'all', // 选中的产品类型默认
						renewTypeGroup: [{ // 续费产品类型
							value: 'all',
							label: '全部',
							num: 20
						}, {
							value: 'yun',
							label: '云服务器',
							num: 30
						}, {
							value: 'general',
							label: '物理服务器',
							num: 10
						}, {
							value: 'virtualhost',
							label: '虚拟主机',
							num: undefined
						}, {
							value: 'domainName',
							label: '域名',
							num: undefined
						}],
						renewActiveTimeType: 'all', // 时间范围默认为全部
						renewActiveTimeGroup: [{ // 续费产品类型
							value: 'all',
							label: '全部',
						}, {
							value: '7day',
							label: '7天内到期',
							num: 5
						}, {
							value: '15day',
							label: '15天内到期',
							num: 1
						}, {
							value: '30day',
							label: '30天内到期',
							num: 1
						}, {
							value: 'twoMonthly',
							label: '两个月内到期',
							num: 2
						}, {
							value: 'dueButNoStop',
							label: '已到期未停服',
							num: 2
						}],
						customTimeRange: undefined, // 自定义选择时间
						showdatepicker: false, // 自定义时间是否展示
						searchkeywords: undefined, // 搜索关键字
						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 81
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],
						reNewProductInfo: [], // 选中的实例信息

						handleRenewtableData: [{
							price: 2000.93,
							buyTimePeriod: '6个月',
							buyNum: 1, // 购买数量
							id: '123ghafsGZf145',
							name: '江先生', // 名称
							typeLabel: '虚拟主机', // 产品类型
							typeValue: 'virtualhost',
							area: '香港', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //镜像 
							expireTime: '2020-12-31', // 到期时间
							expireDay: 14, // 距离到期时间
						}, {
							price: 2000.93,
							buyTimePeriod: '6个月',
							buyNum: 1, // 购买数量
							id: '2324234',
							name: '杨先生', // 名称
							typeLabel: '物理服务器', // 产品类型
							typeValue: 'geneal',
							area: '香港', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //镜像 
							expireTime: '2020-12-31', // 到期时间
							expireDay: 14, // 距离到期时间
						}, {
							price: 2000.93,
							buyTimePeriod: '6个月',
							buyNum: 1, // 购买数量
							id: '4343445',
							name: '江先生', // 名称
							typeLabel: '云主机', // 产品类型
							typeValue: 'yun',
							area: '香港', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //镜像 
							expireTime: '2020-12-31', // 到期时间
							expireDay: 14, // 距离到期时间
						}],
						autoRenewtableData: [{ // 自动续费的表格信息
							price: 2300.93,
							buyTimePeriod: '12个月',
							buyNum: 3, // 购买数量
							id: '123ghafsGZf146',
							name: '慕容先生', // 名称
							typeLabel: '云主机', // 产品类型
							typeValue: 'virtualhost',
							area: '比利时', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //镜像 
							expireTime: '2020-12-31', // 到期时间
							expireDay: 14, // 距离到期时间
							renewTimePeriod: '1个月'
						}, {
							price: 2000.93,
							buyTimePeriod: '6个月',
							buyNum: 1, // 购买数量
							id: '2324234',
							name: '杨先生', // 名称
							typeLabel: '物理服务器', // 产品类型
							typeValue: 'geneal',
							area: '香港', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //镜像 
							expireTime: '2020-12-31', // 到期时间
							expireDay: 14, // 距离到期时间
							renewTimePeriod: '1个月'
						}, {
							price: 2000.93,
							buyTimePeriod: '6个月',
							buyNum: 1, // 购买数量
							id: '4343445',
							name: '江先生', // 名称
							typeLabel: '云主机', // 产品类型
							typeValue: 'yun',
							area: '香港', // 地域
							cpNum: 3, // cpu 核心数
							memory: 50, // 内存
							ipNum: 1, // IP个数
							dataDisk: 100, // 数据盘
							bindWith: 100, // 带宽
							ssd: 50, //SSD
							systemMirror: 'Centons 1.0', //镜像 
							expireTime: '2020-12-31', // 到期时间
							expireDay: 14, // 距离到期时间
							renewTimePeriod: '1个月' // 续费周期
						}],

					}
				},

				methods: {
					// 点击确认恢复手动按钮
					confirmReplyHandleRenew: function() {
						console.log('点击了确认恢复手动按钮')
						this.dialogReplyHandleRenewVisible = false
					},
					
					// 点击确认开通自动续费按钮
					confirmSettingAutoRenew: function() {
						console.log('点击确认开通自动续费按钮')
						this.dialogSettingAutoRenewVisible = false
					},
					

					// 点击恢复手动续费
					handleClickreplyHandleRenew: function(item) {
						this.reNewProductInfo = [item]
						this.dialogReplyHandleRenewVisible = true
					},
					// 点击设置自动续费
					handleClicksettingAutoRenew: function(item) {
						this.reNewProductInfo = [item]
						
						if(this.settingAutoTimeOptions.length > 0) {
							this.activesettingAutoTime = this.settingAutoTimeOptions[0].value
						}
						
						this.dialogSettingAutoRenewVisible = true
					},
					
					// 改变续费方式Type   0 手动方式 1 自动方式
					handleClickTabChangeRenewMethodType: function(key) {
						// 重复点击
						if (this.renewMethodType === key) {
							return
						}

						this.renewMethodType = key
					},


					// 是否显示自定义按钮
					showCustomTimeButton: function(item) {
						if (item.value === 'customTime' && this.showdatepicker) {
							return false
						} else {
							return true
						}

					},

					// 续费产品
					renewProduct: _throttle(function(row) {
						console.log('续费的产品是' + row.id)
						window.open('renewDetail.html?id=' + row.id, '_self')
					}),

					// 点击选中产品类型的方法
					handleClickSelectProductType: _throttle(function(item) {
						this.renewActiveType = item.value
						console.log('选中的产品类型 为' + this.renewActiveType)
					}, 100),

					// 点击选中产品时间范围的方法
					handleClickSelectProductTimeType: _throttle(function(item) {
						if (item.value === 'customTime' && this.renewActiveTimeType !== 'customTime') {
							// 点击了自定义时间
							this.showdatepicker = true
						} else {
							this.showdatepicker = false
						}

						this.renewActiveTimeType = item.value
						console.log('选中的产品时间范围为' + this.renewActiveTimeType)
					}, 100),


					searchSafegroupBykeyword: _throttle(function() {
						if (this.searchkeywords === '' || this.searchkeywords === undefined) {
							return
						}
						console.log('搜索续费数据', this.searchkeywords)
					}, 300),

					handleSizeChange: function(e) {
						console.log(e)
					},
					handleCurrentChange: function(val) {
						console.log('当前页为' + val)
					},
					// 扩展行的方法
					expandtableRow: _throttle(function(row) {
						if(this.renewMethodType === 0) {
							this.$refs.refHandleRenewTable.toggleRowExpansion(row)
						}else {
							this.$refs.refAutoRenewTable.toggleRowExpansion(row)
						}
					}),

					//改变自定义选择时间
					changeCustomselectTime: function(val) {
						console.log(val)
						console.log(this.orderTimeRange)
					},
					// 多选  勾选行
					handleSelectionChange: function(val) {
						if(this.renewMethodType === 0) {
							this.handMethodmultipleSelection = val
						}else if(this.renewMethodType === 1) {
							this.autoMethodmultipleSelection = val
						}
					},
					// 点击批量续费按钮
					handleClickBatchrenewButton: function() {
						let batchrenewIsClick = this.handleBatchrenewIsClick()

						if (batchrenewIsClick === true) {
							// 为true  说明按钮不可以点击  return 回去
							return
						}

						console.log('点击批量续费按钮  准备跳转')
					},
					// 点击批量设置自动续费
					handleClickBatchSettingAutoRenew: function() {
						let batchrenewIsClick = this.handleBatchrenewIsClick()
					
						if (batchrenewIsClick === true) {
							// 为true  说明按钮不可以点击  return 回去
							return
						}
						this.reNewProductInfo = this.handMethodmultipleSelection
						if(this.settingAutoTimeOptions.length > 0) {
							this.activesettingAutoTime = this.settingAutoTimeOptions[0].value
						}
						this.dialogSettingAutoRenewVisible = true
					},
					
					
					// 点击批量恢复手动按钮
					handleClickBatchReplyHandleRenew: function() {
						let batchrenewIsClick = this.handleBatchrenewIsClick()

						if (batchrenewIsClick === true) {
							// 为true  说明按钮不可以点击  return 回去
							return
						}
						this.reNewProductInfo = this.autoMethodmultipleSelection
						this.dialogReplyHandleRenewVisible = true
					},

					// 处理批量续费是否可以点击
					handleBatchrenewIsClick: function() {
						if (this.renewMethodType === 0) {
							// 手动续费
							if (this.handMethodmultipleSelection.length > 0) {
								return false
							} else {
								return true
							}

						} else if (this.renewMethodType === 1) {
							if (this.autoMethodmultipleSelection.length > 0) {
								return false
							} else {
								return true
							}
						}

					}

				},
				mounted: function() {

				}

			})
		</script>
	</body>
</html>
